<script setup lang="ts">
import { ref } from "vue";
import variables from "@/styles/variables.module.scss";
defineProps<{ msg: string }>();
import { useCounterStore } from "@/store/counter";
const count = ref(0);
const useCounter = useCounterStore();

console.log("variable:bgcolor", variables.bgColor)
</script>

<template>
	<h1>{{ msg }}</h1>

	<div class="card">
		<button type="button" @click="count++">count is {{ count }}</button>
		<p>
			Edit
			<code>components/HelloWorld.vue</code> to test HMR
		</p>
	</div>

	<p>
		Check out
		<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
		starter
	</p>
	<p>
		Learn more about IDE Support for Vue in the
		<a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">Vue Docs Scaling up Guide</a>.
	</p>
	<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
	<div class="box">
		SCSS
	</div>
	<div class="text-red">unocss</div>
	<el-form>
		<el-form-item label="子组件数字：">
			{{ useCounter.count }}
		</el-form-item>
		<el-form-item label="子组件加倍：">
			{{ useCounter.double }}
		</el-form-item>
	</el-form>
</template>

<style lang="scss" scoped>
.read-the-docs {
	color: #888;
}

.box {
	width: 100px;
	height: 100px;
	background-color: $bg-color;
}
</style>
